<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="order-info-page interalOrderInfo-page">
			<div>
				<div class="order-info-top">
					<div class="order-state">
						<div class="main-text" v-if="info.orderStateText">{{info.orderStateText}}</div>
						<!--取消-->
						<div class="sub-text" v-if="info.orderCancelReason != ''">{{info.orderCancelReason}}</div>
					</div>
					<div class="order-img">
						<!--待发货-->
						<img src="https://pic.moresu.com/FgEww6XYMz_wwdkiSqkIPuike7I_" v-if="info.orderState == 0" style="width:100px;height:100px;" mode="aspectFit"/>
						<!--待收货-->
						<img src="https://pic.moresu.com/Ft_vzaipAVQ2MYEuIaxS8mrUInua" v-else-if="info.orderState == 20" style="width:100px;height:100px;" mode="aspectFit"/>
						<!--已完成-->
						<img src="https://pic.moresu.com/Fp5QE5io4SMh5EoHsdJA_lJ7p5mq" v-else-if="info.orderState == 30" style="width:100px;height:100px;" mode="aspectFit"/>
						<!--已取消-->
						<img src="https://pic.moresu.com/FgEww6XYMz_wwdkiSqkIPuike7I_" v-else style="width:100px;height:100px;" mode="aspectFit"/>
					</div>
				</div>
				<div class="order-info-adr">
					<div class="img"><img src="https://pic.moresu.com/FskOos8zWjFXelWQ5AsbUqx7Ayz7" style="width:30px;height:30px;" mode="aspectFit"/></div>
					<div class="adr-info">
						<div class="adr-top"><span class="name">{{ info.receiverName}}</span><span class="phone">{{ info.receiverMobile }}</span></div>
						<div class="adr-bottom">{{info.addressInfo}}</div>
					</div>
				</div>
	
				<!--商品-->
				<div class="order-block">
					<div class="goods-info-block" style=" background: #fff;">
						<div class="goods-item" v-for="goodsItem in info.ordGoodsList" :key="goodsItem.goodsId">
							<div class="goods-img">
								<img :src="goodsItem.goodsImage" @click="toGoodsInfo(goodsItem.goodsId)" style="width:70px;height:70px;" mode="aspectFit"/>
							</div>
							<div class="goods-info">
								<div class="goods-name">{{goodsItem.goodsName}}</div>
								<div class="goods-price-num">
									<span class="price">{{goodsItem.goodsPrice}}积分</span>
									<span class="num">X{{goodsItem.goodsNum}}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="order-price-block">
						<u-cell-group>
								<u-cell icon="integral-fill" title="消耗积分" :value="info.orderAmount">
									<div slot="value"><span style="color:#ff4600">{{info.orderAmount}}</span> </div>
								</u-cell>
						</u-cell-group>
					</div>
				</div>
	
				<!--留言-->
				<div class="order-block">
					<div class="orderRemark">
						<div class="label">留言：</div>
						<div class="text">{{info.orderRemark}}</div>
					</div>
				</div>
	
				<!--订单信息-->
				<div class="order-block">
					<div class="order-info-block">
						<div class="info-title">订单信息</div>
						<div class="info-con">
							<div class="info-row">
								<div class="label">订单编号：</div>
								<div class="text">{{info.orderSn}}</div>
							</div>
							<div class="info-row">
								<div class="label">下单时间：</div>
								<div class="text">{{info.createTime}}</div>
							</div>
							<u-steps current="0" direction="column" activeColor="#ff4600">
									<u-steps-item  v-for="(item,index) in info.logList" :key="index" :title="item.createPerson+':'+item.logContent" :desc="item.logTime">
									</u-steps-item>
							</u-steps>
						</div>
					</div>
				</div>
	
				<div style="overflow: hidden">
					<div style="display:flex;align-items: center;justify-content:center;padding:10px;line-height: 20px;font-size:14px;background: #fff;border-top:1px solid #eee;color:#1989fa" @click="callPhone">
						<span><u-icon name="phone" size="20"></u-icon></span>
						<span style="padding-left:10px;">联系卖家</span>
					</div>
				</div>
	
				<!--确认收货 -->
				<div class="page-bottom-btn" v-if="info.orderState == 20" style="z-index: 3">
					<div style="padding:16px;width:100%" >
						<u-button 
						shape="circle"
						 @click="confirmReceipt(info.orderId)"
						 customStyle="{'width':'100%','height':'40px'}"
						 color="linear-gradient(90deg, #ff4e00 0%, #fd7505 100%)"
						>确认收货</u-button>
					</div>
				</div>
	
	
			</div>
	
	
		</div>
  </div>
</template>

<script>
  import{integralOrderDetail,integralOrderReceipt,postOrderCancel} from '@/config/points.js'
  import {commonData} from '@/config/api.js'
  import {pageSeo} from '@/config/api.js'
  import store from '@/store';
  export default {
    components: {
      

    },
    data() {
      return {
			info:{},
			spinShow:true,
			orderId:'',
			show:false,
			show2:false,
			formCancel:{
				orderId:'',
				remark:'',
				cancelReason:{},
			},
			reasonList:[],
			btnLoading:false,
			showRight:false,
			siteInfo:{},
			contactMobile:''
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
		this.orderId = options.orderId
        this.getInfo();  
		commonData().then((res)=>{
			this.contactMobile = res.contactMobile
		})
    },
	
	async onShow() {
		// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif	
	},


	
    methods: {
		
		callPhone(){
			uni.makePhoneCall({
				phoneNumber:  this.contactMobile
			});
		},
		
		
		//获取订单详情
		getInfo(){
			this.spinShow = true;
			integralOrderDetail({orderId:this.orderId}).then((res)=>{
				console.log("7845",res)
				this.info = res;
				this.spinShow = false;
				console.log(this.spinShow)
			}).catch(()=>{
				this.spinShow = false;
			})
		},

		//确认收货
		confirmReceipt(id){
			uni.showModal({
				title: '确认收货',
				content: '是否确认收货？',
				success:  (res)=> {
						if (res.confirm) {
							integralOrderReceipt({orderId:id}).then((res)=>{
								this.getInfo();
								uni.$u.toast("订操作成功!");
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
				}	
			})
		},



		//去商品详情页
		toGoodsInfo(goodsId){
			uni.navigateTo({
				url: '/pagesIntegral/integralGoodsInfo?goodsId='+goodsId
			})
		},



		show2picker(){
			this.show2 = true;
		},
		onConfirm(e) {
			let value = e;
			this.formCancel.cancelReason = value;
			this.show2 = false;
		},
		onCancel() {
			this.show2 = false;
		},

		//取消订单
		cancelOrder(id){
			this.show = true;
			this.formCancel.orderId = id;
			this.formCancel.cancelReason = null;
			this.formCancel.remark = '';
		},

		//确认取消订单
		okFn(){
			if(!this.formCancel.cancelReason){
				uni.$u.toast("请选择取消原因");
				return false;
			}
			this.btnLoading = true;
			let data = {};
			data.orderId = this.formCancel.orderId;
			data.cancelReason = this.formCancel.cancelReason.reasonTitle;
			data.remark = this.formCancel.remark;
			postOrderCancel(data).then((res)=>{
				this.getInfo();
				this.show = false;
				this.btnLoading = false;
				uni.$u.toast("订单已取消");
			}).catch(()=>{
				this.show = false;
				this.btnLoading = false;
			})

		},
		
	},
	
	
	

  }
</script>


<style lang="scss">
@import '@/style/zj.scss';

</style>


    
    
